<template>
	<div class="redpkg_com">
		<div v-if="isReady" class="ready_con">
			<img class="top_ready_tip" src="~@/static/redpkg/ready_tip.png" alt="" />
			<img v-show="showNum==1" ref="p1_num_1" class="ready_num_three" src="~@/static/redpkg/b_three.png" alt="" />
			<img v-show="showNum==2" ref="p1_num_2" class="ready_num_two" src="~@/static/redpkg/b_second.png" alt="" />
			<img v-show="showNum==3" ref="p1_num_3" class="ready_num_one"  src="~@/static/redpkg/b_first.png" alt="" />
			<img class="top_ready_do" src="~@/static/redpkg/ready_do.png" alt="" />
			<img class="top" src="" alt="" />
		</div>
		<div v-else class="ready_con">
			<img class="all_time" src="~@/static/redpkg/b_all_time.png" alt="" />
			<div class="times">{{formatNum(pageSeconds)}}s</div>
		</div>
		<div id="red-packet-rain-container">
			<div  v-if="!isReady">
				<div v-for="(packet, index) in redPackets" :key="packet.onlyKey" :id="packet.onlyKey"
					class="red-packet"
					@click="handleClick(packet,index)"
					@touchstart="touchedClick(packet,index)"
					:style="{top:packet.y+'rpx',left:packet.x+'rpx',display:packet.isEnd?'none':'block',transform: 'rotate('+packet.rotate+'deg)'}">
					<div class="img"  :style="{'background':'url('+bagImg+') center center no-repeat'}"></div>
				</div>
			</div>
		</div>
		<clickVoice ref="clickVoice" :voice="data.click_music"></clickVoice>
	</div>
</template>

<script>
import {isIos} from '@/until/QFH5.js'
	export default {
		props: {
			bagImg: {
				default: ''
			},
			seconds: {
				default: 20
			},
			data:{
				default:()=>{return {click_music:''}}
			}
		},
		data() {
			return {
				redPackets: [], // 红包数组
				endRedPackets:[],
				bagNums: 12, //红包数量
				containerWidth: 0,
				containerHeight: 0,
				speedStep: 7, //最大速度
				pix: 1, //页面缩放倍率
				rotate: 0, //红包倾斜角度
				addPix:10,//增加红包的密度
				distance: 500, //x轴保护距离
				addPixstatus:1,//
				bagWidth: 125,
				bagHeight: 166,
				
				socks: false,//强制锁定退出
				isReady: true,
				showNum:1,//准备
				pageSeconds:0,//倒计时
				clickTimes:0,
				timer:0,
				emitSock:false,
				addSocks:0,
			};
		}, 
		mounted() {
			// 
			
			
			this.pageSeconds = this.seconds * 1000
			let _t = this
			uni.getSystemInfo({
				success(res) {
					let pix = res.windowWidth / 750
					this.pix = pix
					_t.containerWidth = res.windowWidth / pix;
					_t.containerHeight = res.windowHeight / pix;
					_t.setAnimationFirstPage()
				}
			})

		},
		methods: {
			formatNum(number){
				let res = (number/1000).toFixed(0)
				return res<=0?0:res
			},
			setAnimationFirstPage() {
				let num_1 = this.$refs['p1_num_1']
				let num_2 = this.$refs['p1_num_2']
				let num_3 = this.$refs['p1_num_3']
				let _this = this
				num_1.addEventListener('animationend', function() {
					_this.showNum=2
				}, false);
				num_2.addEventListener('animationend', function() {
					_this.showNum=3
				}, false);
				num_3.addEventListener('animationend', function() {
					_this.showNum=0
					_this.isReady = false
					_this.start()
				}, false);
			},
			ready() {

			},
			start() {
				let _t = this
				let seconds_end = +((this.containerHeight*2-this.bagHeight)/2 /this.speedStep *16).toFixed(0) +1000
				console.log('锁定时间',seconds_end)
				let obj = {
					x:Math.floor(Math.random() * ((this.containerWidth - this.bagWidth) * 0.92) + this.containerWidth * 0.04),
					y :-1*this.bagHeight,
					isEnd :false,
					rotate :this.rotate,
					onlyKey :new Date().getTime()
				}
				this.redPackets.push(obj)
				let timers = setInterval(() => {
					this.addSocks++
					if(this.addSocks>=this.addPixstatus){
						this.addSocks = 0
						this.addPixstatus = (Math.random()*this.addPix).toFixed(0)
						_t.initPacket()//先获取
					}
					_t.updateRedPackets();//再刷新
					_t.pageSeconds -=16
					if(_t.pageSeconds<=seconds_end){
						_t.socks = true
					}
					if(_t.pageSeconds<=0 && !_t.emitSock){
						_t.emitSock = true
						_t.$emit('secondFinish',_t.clickTimes)
					}
					if(_t.redPackets.length==0){
						clearInterval(timers)
						_t.$emit('finish',_t.clickTimes)
					}
				}, 16);
			},
			touchedClick(packet, index){
				if(!isIos()){
					return
				}
				this.clickredPaket(packet, index)
			},
			handleClick(packet, index) {
				if(isIos()){
					return
				}
				this.clickredPaket(packet, index)
			},
			clickredPaket(packet, index) {
			    this.$refs.clickVoice.playVoice()
				this.clickTimes+=1
				this.redPackets[index].isAnimation = true
				let _dom = document.getElementById(packet.onlyKey)
				_dom.className +=' red-pkg-out'
				let _t = this
				_dom.addEventListener('animationend', function() {
					let _index = _t.redPackets.findIndex(item => item.onlyKey == packet.onlyKey)
					if(_index!=-1){
						_t.redPackets[_index].isEnd = true
						_t.redPackets.splice(_index,1)
					}
				}, false);
			},
			//刷新红包位置
			updateRedPackets() {
				this.redPackets.forEach((packet, index) => {
					if(!packet.isAnimation){
						packet.y += this.speedStep;
					}
					if (packet.y > this.containerHeight) {
						packet.isEnd = true
						// this.endRedPackets.push(packet)
						this.redPackets.splice(index,1)
					}
					
				});
			},
			//增加红包
			initPacket() {
				let pos = this.generateRandomPoint()
				if((pos.x==0&&pos.y==0) || this.socks){
					//无效坐标
					return
				}else{
					let packet = {}
					packet.y = pos.y;
					packet.x = pos.x;
					packet.isEnd = false
					packet.isAnimation = false
					packet.onlyKey = new Date().getTime()
					packet.rotate = this.rotate;
					this.redPackets.push(packet)
				}
			},
			isTooClose(x, y) {
				let socks = true
				for (const point of this.redPackets) {
					let dis = Math.abs(point.x - x )
					 if(point.y<0 &&  dis< this.distance){
						 socks =  false 
					 }
				}
				return socks;
			},
			//获取唯一坐标
			generateRandomPoint() {
				let x, y;
				let times = 0
				let maxLength = Math.floor((this.containerWidth*0.92)/this.bagWidth)
				let isEnd = true
				do {
					x = Math.floor(Math.random() * ((this.containerWidth - this.bagWidth) * 0.92) + this.containerWidth * 0.04);
					y = -1*this.bagHeight;
					times++;
					let isOnly = this.isTooClose(x, y)
					if(times>=maxLength || isOnly){
						isEnd = false
					}
				} while (isEnd);
				if(times>=maxLength){
					return {x:0,y:0}//无效坐标
				}else{
					return { x, y };
				}
				
			},


		}
	}
</script>

<style lang="scss" scoped>
	@import url("../../plugin/pages/animation.css");
	.red-pkg-out {
	    animation: zoomOut 0.8s ease-in-out;
	}
	.redpkg_com {
		position: relative;
	}

	.ready_con {
		img {
			position: absolute;
		}
		.times{
			position: absolute;
			left: 0;
			top: 160rpx;
			left:300rpx;
			width: 150rpx;
			height: 75rpx;
			line-height: 75rpx;
			text-align: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 54rpx;
			color: #FFFFFF;
		}
	}
	.all_time{
		top:114rpx;
		left:299rpx;
		width: 154rpx;
		height: 38rpx;
	}
	.ready_num_one{
		top:368rpx;
		left:316rpx;
		width: 118rpx;
		height: 219rpx;
		animation: heartBeat 1s ease-in-out;
	}
	.ready_num_two{
		top:360rpx;
		left:298rpx;
		width: 153rpx;
		height: 227rpx;
		animation: heartBeat 1s ease-in-out;
	}
	.ready_num_three{
		top:366rpx;
		left:297rpx;
		width: 155rpx;
		height: 221rpx;
		animation: heartBeat 1s ease-in-out;
	}

	.top_ready_tip {
		width: 283rpx;
		height: 102rpx;
		top: 250rpx;
		left: 233rpx;
	}

	.top_ready_do {
		width: 519rpx;
		height: 131rpx;
		left: 116rpx;
		bottom: 280rpx;
		animation: pulse 1s linear infinite;
	}

	#red-packet-rain-container {
		position: relative;
		width: 100%;
		height: 100vh;
		transform: rotate(30deg);
	}

	.red-packet {
		width: 125rpx;
		height: 166rpx;
		color: white;
		text-align: center;
		line-height: 80rpx;
		border-radius: 10rpx;
		position: absolute;
		cursor: pointer;
		opacity: 1;
		pointer-events: auto;
		z-index: 9999;
		visibility: visible;
		.img {
			width: 125rpx;
			height: 166rpx;
			background-size:cover!important;
		}

		// transform: rotate(45deg);
	}
</style>